<div class='subtitle'>
    <span class='table-title'>{{modelType == 'handle'?"案件办理":"案件审批"}}</span>
    <span class='table-add'> 
        <a appBtnPermiss [permissId]="btnPerssion.insert" routerLink='./addhandle'>新增</a>
    </span>
    <em class='sub-hr'></em>
</div>
<div class='table-params'>
    <div class='table-row'>

        <div class='table-select'>
            <span>案件来源：</span>
            <div class='selection-info'>
                <nz-select style="width: 120px;" [nzDropdownStyle]="{'color':'#222','font-size':'14px'}" [(ngModel)]="handle.handleOriginValue" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                    <nz-option [nzValue]="handleOrigin.value" [nzLabel]="handleOrigin.name" *ngFor="let handleOrigin of handleOriginList"></nz-option>
                </nz-select>
            </div>
        </div>

        <div class='table-select'>
            <span>案件类型：</span>
            <div class='selection-info'>
                <nz-select style="width: 120px;" [nzDropdownStyle]="{'color':'#222','font-size':'14px'}" [(ngModel)]="handle.handleType" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                    <nz-option [nzValue]="state.value" [nzLabel]="state.name" *ngFor="let state of handleTypeList"></nz-option>
                </nz-select>
            </div>
        </div>

        <div class='table-input'>
            <span>当事人：</span>
            <input [(ngModel)]="handle.partyName" />
        </div>
        
        <div class='table-select'>
          <span>办理状态：</span>
          <div class='selection-info'>
              <nz-select style="width: 120px;" [nzDropdownStyle]="{'color':'#222','font-size':'14px'}" [(ngModel)]="handle.handleStatus" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                  <nz-option [nzValue]="state.value" [nzLabel]="state.name" *ngFor="let state of handleStatusList"></nz-option>
              </nz-select>
          </div>
         </div>
        <!-- <div class='table-select'>
            <span>地区：</span>
            <div class='selection-info' >
                <nz-cascader  [nzOptions]="areaList" (nzClear)='selectionClear()' [nzLabelRender]='area' nzPlaceHolder='请选择' nzShowArrow='false' [nzShowSearch]="false" (nzSelect)='onSelection($event)' (nzSelectionChange)='onSelectionFn($event)' [nzChangeOnSelect]='true'>
                </nz-cascader>
            </div>
        </div> -->
        
    </div>
    <div class='table-row'>
        <div class='table-date'>
            <span>登记时间：</span>
            <div class='my-date-wrap'>
                <nz-date-picker [(ngModel)]="handle.dataStart" nzPlaceHolder='请选择' nzFormat='yyyy-MM-dd' (ngModelChange)="onStartChange($event)"></nz-date-picker>
            </div>
            <em>至</em>
            <div class='my-date-wrap'>
                <nz-date-picker [(ngModel)]="handle.dataEnd" nzPlaceHolder='请选择' nzFormat='yyyy-MM-dd' (ngModelChange)="onCloseChange($event)"></nz-date-picker>
            </div>
        </div>
   
        <div class='table-btn-group'>
            <div class='search-btn ripple'>
                <button (click)="search()">查询</button>
            </div>
            <div class='reset-btn ripple'>
                <button (click)="reset()">重置</button>
            </div>
            <div class='export-btn ripple' >
                <button (click)="export()" appBtnPermiss  [permissId]="btnPerssion.export">导出</button>
            </div>
        </div>
    </div>
</div>

<!-- //select模板 -->

<ng-template #icon>
    <i nz-icon nzType="caret-down" nzTheme="outline"></i>
</ng-template>
<!-- 地区 -->
<ng-template #area>
    <div class='area' *ngIf="areaData.showArea">
        {{areaData.showArea}}
        <i nz-icon nzType="caret-down" nzTheme="outline"></i>
    </div>
    <div *ngIf="!areaData.showArea" style="color: rgba(0,0,0,.55);">
        请选择
    </div>

</ng-template>

<app-table [type]='modelType' #table></app-table>